//父方法参数传递给子方法
import React, { useState, useRef } from 'react';
import { Button, Input, Space } from 'antd';

import SonFun from './SonFun';

const FatherFun = () => {
    const [mydata, setMydata] = useState({
        key1: 123,
        key2: '初始值'
    })
    const childRef = useRef()
    const handerGetSonFun = () => {
        // inputRef?.current?.current 
        // 等于
        // if (inputRef !== undefined && inputRef.current !== undefined) return inputRef.current

        // 调用子模块里的方法
        childRef.current.handerSonFun()
    }

    const handerMyClcikNodeFun = () => {
        setMydata({
            key1: 666,
            key2: '父模块里的内容'
        })
    }

    const handerChange = (e) => {
        let key = e.target.id

        const newMyDate = {}
        if (key === 'key1') {
            newMyDate.key1 = e.target.value
            newMyDate.key2 = mydata.key2
        }

        if (key === 'key2') {
            newMyDate.key2 = e.target.value
            newMyDate.key1 = mydata.key1
        }

        setMydata(
            newMyDate
        )
    }

    return (
        <>
            <h3>父方法调用子方法，父参数传给子方法</h3>
            <h3>父方法：</h3>
            <Space wrap>
                <Button type="primary" onClick={handerGetSonFun} >调用子方法的函数count+</Button>
                <Button type="primary" onClick={handerMyClcikNodeFun}>把值传给子方法</Button>
            </Space>
            <h4>key1：{mydata.key1}</h4>
            <h4>key2：{mydata.key2}</h4>
            Key1：<Input value={mydata.key1} style={{ width: 200 }} id="key1" onChange={handerChange} />
            Key2：<Input value={mydata.key2} style={{ width: 200 }} id="key2" onChange={handerChange} />


            <hr />
            {/* 子模块 */}
            <SonFun nodeData={mydata} ref={childRef}></SonFun>
        </>
    )
}

export default FatherFun